<script>
import { marked } from 'marked'
import DOMPurify from 'dompurify'

export default {
  name: "AnalyzeChat",
  data(){
    return {
        question:"分析一下2024年1月份的数据",//问题
        loading:false, //加载提示
        list:[], //表格数据
        result:"",//分析数据
        isShow:false,//是否显示答案区域

    }
  },
  methods:{
       formatMessage(content) {
      // 使用marked解析markdown并净化HTML
      return DOMPurify.sanitize(marked.parse(content || ''))
     },
       sendInfo(){ //发送信息
          const self = this;
          //显示AI提示
         self.loading = true;
          this.$http.get('/api/analyze_chat/',{params:{question:this.question}})
            .then(function (rs){
              console.log(rs.data);
              //显示答案区域
              self.isShow = true;
              if(rs.data.code === 200){
                //不显示加载提示
                self.loading = false;
                //显示表格数据
                self.list =rs.data.data.table_data;
                //显示结果
                self.result = rs.data.data.analyze_data;
                //初始化图表
                var chart  = echarts.init(document.getElementById('main'))
                chart.setOption(JSON.parse(rs.data.data.echarts_data));
              }
            })
       }
  },
}
</script>

<template>
      <div>
         <el-input v-model="question"></el-input>
         <el-button type="success" @click="sendInfo">发送</el-button>

        <div               v-loading="loading"
    element-loading-text="AI正在思考"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">

        </div>

         <div v-show="isShow">

            <el-table :data="list">
                <el-table-column label="客户id" prop="orderId"></el-table-column>
               <el-table-column label="购买时间" prop="date"></el-table-column>
               <el-table-column label="金额" prop="money"></el-table-column>
            </el-table>

              <div v-html="formatMessage(result)"></div>

              <div id="main" style="width: 1000px;height: 400px"></div>

            </div>

         </div>

</template>

<style scoped>

</style>
